<template>
  <div>
    <div class="info">
      <el-form ref="form" :model="form" label-width="9.2rem" label-position="left">
        <!-- 基本信息 -->
        <div class="basic-info">
          <div class="basic-info__avatar">
            <img src="../../../assets/headimg.png">
          </div>
          <div class="basic-info__content writer-info">
            <div class="writer-info__bednum">{{ form.bedNum }}</div>
            <div class="writer-info__row">
              <el-form-item label="姓名:" label-width="5.5rem">
                <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
              </el-form-item>
              <el-form-item label="性别:" label-width="5.5rem">
                <el-select v-model="form.sex" placeholder="请选择性别">
                  <el-option label="男" value="1"></el-option>
                  <el-option label="女" value="2"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="年龄:" label-width="5.5rem">
                <el-input v-model.number="form.age" type="age" autocomplete="off" placeholder="请输入年龄"></el-input>
              </el-form-item>
            </div>
            <div class="writer-info__row">
              <el-form-item label="责任护士:">
                <el-select v-model="form.nurse" placeholder="请选择责任护士">
                  <el-option label="特级护理" value="9"></el-option>
                  <el-option label="一级护理" value="1"></el-option>
                  <el-option label="二级护理" value="2"></el-option>
                  <el-option label="三级护理" value="3"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="主治医生:">
                <el-select v-model="form.doctor" placeholder="请选择主治医生">
                  <el-option label="特级护理" value="9"></el-option>
                  <el-option label="一级护理" value="1"></el-option>
                  <el-option label="二级护理" value="2"></el-option>
                  <el-option label="三级护理" value="3"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="护理等级:">
                <el-select v-model="form.careLevel" placeholder="请选择护理等级">
                  <el-option label="特级护理" value="9"></el-option>
                  <el-option label="一级护理" value="1"></el-option>
                  <el-option label="二级护理" value="2"></el-option>
                  <el-option label="三级护理" value="3"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="饮食:" label-width="5.5rem">
                <el-select v-model="form.diet" placeholder="请选择饮食">
                  <el-option label="普食" value="1"></el-option>
                  <el-option label="糖尿病饮食" value="2"></el-option>
                  <el-option label="低盐低脂饮食" value="3"></el-option>
                  <el-option label="流质饮食" value="4"></el-option>
                  <el-option label="禁饮禁食" value="5"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </div>
        </div>

        <!-- 备注 -->
        <div class="remarks-info">
          <div class="web-caption">
            <span class="web-caption__title">备注</span>
            <span class="web-caption__subtitle">(请用“、”隔开)</span>  
          </div>
          <el-input type="textarea" :rows="6" v-model="form.remarks" placeholder="请输入备注内容" show-word-limit maxlength="200"></el-input>
        </div>

        <!-- 选择护理事项 -->
        <div class="care-info">
          <div class="web-caption">
            <div class="web-caption__title">选择护理事项</div>
          </div>

          <div class="care-tag">
            <template v-for="(item,index) in careTagList">
              <div class="web-tag web-tag-default" :key="index">{{ item }}</div>
            </template>
            <div class="care-tag__add" @click="toAddCareTxt">+ 添加</div>
          </div>
        </div>

        <!-- 保存 -->
        <div class="web-btn-long__primary">保存</div>
      </el-form>
    </div>
    <ConfirmDialog ref="confirm-dialog" />
  </div>
</template>

<script>
import { Form, FormItem, Input, Select, Option, Button } from 'element-ui'
import ConfirmDialog from '../dialog/ConfirmDialog'

export default {
  data () {
    return {
      form: {
        bedNum: '01',
        name: '123',
        sex: 1,
        age: 19,
        nurse: 1,
        doctor: 1,
        careLevel: 1,
        diet: 1
      },
      careTagList: ['口腔护理','膀胱清洗','鼻饲','测血压q1h','记24h屎量','注射胰岛素','测血糖','今日入院','今日出院','测血糖','今日入院','今日出院']
    }
  },
  components: {
    ElForm: Form,
    ElInput: Input,
    ElFormItem: FormItem,
    ElSelect: Select,
    ElOption: Option,
    ElButton: Button,
    ConfirmDialog
  },
  mounted () {
    // this.showConfirmDialog()
  },
  methods: {
    toAddCareTxt () {
      this.$router.push({ name: 'addCareTxt' })
    },
    showConfirmDialog () {
      this.$refs['confirm-dialog'].showDialog()
    }
  }
}
</script>

<style lang="scss" scoped>
.info {
  margin: 30px 56px 0 56px;
  padding-bottom: 72px;
}

.basic-info {
  display: flex;
  flex-direction: row;
}
.basic-info__avatar {
  width: 240px;
  height: 200px;
}
.writer-info {
  text-align: left;
  margin-left: 24px;
}
.writer-info__bednum {
  font-size: 36px;
  line-height: 50px;
  color: #333333;
}
.writer-info__row {
  display: flex;
  flex-direction: row;
  .el-form-item {
    margin-right: 40px;
  }
}
.web-caption {
  margin: 56px 0 24px 0;
}
.care-tag {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  .web-tag {
    margin-bottom: 40px;
  }
  &__add {
    height: 56px;
    line-height: 56px;
    background: rgba(115, 147, 186, 0.1);
    border: 1px solid #3B608D;
    border-radius: 10px;
    font-size: 24px;
    font-weight: 400;
    color: #7393BA;
    padding: 0 16px;
  }
}
.web-btn-long__primary {
  margin: 0 auto;
}
</style>